<template>
	<div id="app">
		<!-- <h1>{{ num }}</h1>
		<button @click="num += 1">+1</button> -->
		<h1>{{ obj.num }}</h1>
		<button @click="obj.num += 1">+1</button>
		<h2>{{ msg }}</h2>
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  data() {
    return {
      num: 1,
      obj: {
        num: 1,
      },
    };
  },
  // https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8
  // 计算属性
  computed: {
    msg() {
      return 'hello';
    },
  },
  // 侦听器
  watch: {
    // num(val, oldVal) {
    //   console.log('现在的值：', val);
    //   console.log('以前的值：', oldVal);
    // },
    // obj(val, oldVal) {
    // 这种方式侦听不了对象的
    //   console.log('现在的值：', val);
    //   console.log('以前的值：', oldVal);
    // },
    obj: {
      deep: true,
      immediate: true, // 该回调将会在侦听开始之后被立即调用
      handler(val, oldVal) {
        console.log('现在的值：', val);
        console.log('以前的值：', oldVal);
      },
    },
  },
  components: {
    HelloWorld,
  },
};
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
</style>
